<template>
  <view @click="emit('click')" class="x-cell">
    <view style="width: 100%">
      <view class="x-space-between" style="min-height: 80rpx;">
      <view class="left x-row">
        <slot name="icon">
          <i class="iconfont icon" :style="style" :class="classList" v-if="props.icon"></i>
        </slot>
        <view class="title" :style="{width: props.titleWidth}">
          <slot name="title"><text v-if="props.required" class="x-text-danger" style="width: 12rpx;color: red;position: absolute;left: -12rpx;">*</text><text class="x-label">{{props.title}}</text></slot>
        </view>
      </view>
      <view class="right x-row" :style="{width: `calc(100% - (${props.titleWidth} + '12rpx'))`}">
        <view style="word-break: break-all;text-align: right;">
          <slot name="value">{{props.value || ''}}</slot>
        </view>

        <slot name="suffix">
          <view v-if="props.isLink">
            <uni-icons color="#999" type="right"></uni-icons>
          </view>
        </slot>
      </view>
    </view>
    <slot name="desc"><view v-if="! $empty(props.desc)" class="desc">{{props.desc}}</view></slot>
    </view>
  </view>
  <view :class="{border: props.border}"></view>
</template>

<script setup>
import { computed } from 'vue';
	const props = defineProps({
		border: {
			type: Boolean,
			default: true
		},
		icon: String,
		iconColor: String,
		title: String,
		titleWidth: {
			type: String,
			default: '160rpx'
		},
		required: {
			type: Boolean,
			default: false
		},
		value: String | Number,
    desc: String,
		isLink: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['click'])

	//'icon-' + props.icon +' ' + props.iconColor
	let classList = computed(() => {
		return ['icon-' + props.icon]
	})

	let style = computed(() => {
		return {"color": props.iconColor}
	})
</script>

<style lang="less">
	.border {
		width: 94%;
		margin: 0 auto;
		border-bottom: 1px solid #e9e9e9;
	}

	.x-row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.x-cell {
		width: 100%;
		min-height: 80rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;

		.left {

			.icon {
				font-size: 40rpx;
				width: 40rpx;
				margin-right: 10rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
				color: #333;
			}

			.title {
				font-size: 32rpx;
				position: relative;
			}
		}

		.right {
			font-size: 30rpx;
			color: #999;
		}

    .desc {
      color: #999;
      font-size: 24rpx;
    }
	}
</style>
